<template>
	<view>
		<u-toast ref="uToast" />

		<u-navbar :back-text="text"></u-navbar>
		<view class="content">
			<!-- 正文内容 -->

			<view class="header">
				<view class="one">
					<view style=" width: 120rpx;height: 120rpx;float: left;margin-right: 17px;" @click="tuihui">
						<view :class="ids != 6 ? 'hole' : 'hole6'" :data-content='contnetVar'></view>
					</view>
					<view class="title" style="	font-size: 36rpx;font-weight: bold;">
						{{list2.orderNo}}
						<view style="font-size: 26rpx;color: #999999;margin-top: 28rpx;">
							时限要求:{{list2.timeLimit}} <span style="float: right;">{{urgentDegree}}</span>
						</view>
					</view>
				</view>
				<view>
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<i class="iconfont icon-weijiegongdan" style="font-size: 60rpx;"
								:style="{color:(icon1==0? '#9f9f9f' :'#4a9add')}"></i>
							<view class="grid-text">备料</view>
						</u-grid-item>
						<u-grid-item @click="heliao1(30)">
							<i class="iconfont icon-heliao" style="font-size: 60rpx;"
								:style="{color:(icon2==0? '#9f9f9f' :'#4a9add')}"></i>

							<view class="grid-text">核料</view>
						</u-grid-item>
						<u-grid-item @click="heliao2(40)">
							<i class="iconfont icon-piliangqujian" style="font-size: 60rpx;"
								:style="{color:(icon3==0? '#9f9f9f' :'#4a9add')}"></i>
							<view class="grid-text">取件</view>
						</u-grid-item>
						<u-grid-item @click="heliao3(50)">
							<i class="iconfont icon-dingdanwancheng" style="font-size: 60rpx;"
								:style="{color:(icon4==0? '#9f9f9f' :'#4a9add')}"></i>
							<view class="grid-text">完成</view>
						</u-grid-item>
					</u-grid>


				</view>
			</view>
			<!-- <view class="contents"> -->
			<view class="vis" style="margin: 10px auto;">
				<view>
					<span
						style="float: left;display: flex;align-items: center;text-justify: newspaper;    word-break: break-all;">
						客户名：{{list2.customName}}
					</span>
				</view>
				<view style="padding-top: 60rpx;">
					<view style="float: left;padding-top: 2px;text-justify: newspaper;    word-break: break-all;">
						出发地：{{list2.startAddress}} （{{list2.startTel}}）</view>
				</view>
				<view style="padding-top: 60rpx;">
					<view style="float: left;padding-top: 2px;text-justify: newspaper;    word-break: break-all;">
						目的地：{{list2.endAddress}}（{{list2.endTel}}）</view>
				</view>
				<view style="padding-top: 60rpx;">
					<view style="float: left;padding: 4px 0;text-justify: newspaper;    word-break: break-all;">
						备注：{{list2.remark==null ? '无' : list2.remark }}</view>
				</view>


				<view style="margin-top: 10rpx;text-align: left;word-wrap: break-word;display: inline-table">
					<view
						style="float: left;padding-top: 2px;width: 40vw;text-justify: newspaper;    word-break: break-all;">
						合同名/名称：{{list2.contractNo==null ? '无' : list2.contractNo}}</view>
					<view
						style="float: right;padding-top: 2px;width:40vw;text-justify: newspaper;    word-break: break-all;margin-left: 20rpx; ">
						运输类型：{{list2.transportType==null ? '无' : yunshuleixing}}</view>
				</view>
				<view style="margin-top: 0;text-align: left;word-wrap: break-word;display: inline-table">
					<view
						style="float: left;padding-top: 2px;width: 40vw;text-justify: newspaper;    word-break: break-all;">
						航班/运单号：{{list2.waybillNo==null ? '无' : list2.waybillNo}}</view>
					<view
						style="float: right;padding-top: 2px;width: 40vw;text-justify: newspaper; margin-left: 20rpx;   word-break: break-all;">
						业务类型：{{list2.businessType==null ? '无' : yewuleixing}}</view>
				</view>

			</view>

			<!-- ------------------------------------------------------ -->
			<!-- 备料-->
			<!-- <view v-if="ids==1"> -->

			<view :style="{marginBottom:(isbutton==1 ?'20px' : '' )}"
				v-if="list2.woOrderDetailList!=null  || list2.woOrderDetailList.length > 0">

				<view class="vis heliaoClass " style="margin-bottom: 10px;    overflow: hidden;"
					v-for="(item,index) in list2.woOrderDetailList " :key=" index">
					<view>

						<view style="padding-top: 0;text-align: left;word-wrap: break-word;    display: inline-table;">
							<view
								style="float: left;padding-top: 2px;width: 40vw;    text-justify: newspaper;    word-break: break-all; ">
								名称：{{item.detailName==null ? '无' : item.detailName}} </view>
							<view
								style="float: left;padding-top: 2px;width: 40vw;text-align: justify;    text-justify: newspaper;margin-left: 20rpx;word-break: break-all;">
								数量：{{item.detailNumber==null ? '无' : item.detailNumber}}</view>
						</view>
						<view style="padding-top: 0;text-align: left;word-wrap: break-word;    display: inline-table;">
							<view
								style="float: left;padding-top: 2px;width: 40vw;    text-justify: newspaper;    word-break: break-all; ">
								机号：{{item.airNo==null ? '无' : item.airNo}} </view>
							<view
								style="float: left;padding-top: 2px;width: 40vw;text-align: justify;    text-justify: newspaper;margin-left: 20rpx;word-break: break-all;">
								机位：{{item.seat==null ? '无' : item.seat}}</view>
						</view>
						<view style="padding-top: 0;text-align: left;word-wrap: break-word;    display: inline-table;">
							<view
								style="float: left;padding-top: 2px;width: 40vw;  text-justify: newspaper;    word-break: break-all; ">
								件号：{{item.detailNo==null ? '无' : item.detailNo}} </view>
							<view
								style="float: left;padding-top: 2px;width: 40vw;  text-justify: newspaper;    word-break: break-all;margin-left: 20rpx; ">
								序号：{{item.meteringNo==null ? '无' : item.meteringNo}}</view>
						</view>

					</view>


					<view v-if=" Nothree == 1">
						<view v-for="(data,i) in imgList" :key="i">
							<view v-if="item.detailId == data.subOrderId  ">
								<view class="imgClass">
									<u-image width="100%" height="100%" :src="baseUrl +data.attachUrl"
										@click="imgListPreview(baseUrl +data.attachUrl)"></u-image>
								</view>
							</view>
						</view>
					</view>


					<view v-if="ids == 3 && imgList.length == 0">
						<div style="border-top: 1px solid #dedede;margin: 10px 0;"></div>
						<span style="color: red;">*</span>不能超过5M（最多上传16张）
						<u-upload ref="uUpload" :action="actions" :header="headers" @on-success="onsuccess"
							@on-uploaded="onuploaded" :max-size="5 * 1024 * 1024" @on-error="onerror"
							@on-remove="onRemove" max-count="16" :auto-upload="false" name="file"
							@on-change="onListOnchange" width="139" height="139" :index="item.detailId">

						</u-upload>
					</view>

				</view>


			</view>
			<!-- </view> -->

			<!-- 配送/取件 -->
			<view class="vis" style="margin-bottom: 10px;margin-bottom: constant(safe-area-inset-bottom);  
		margin-bottom: env(safe-area-inset-bottom);"
				v-if="(ids==2 && imgList.length ==0) || (ids == 4 && imgList.length == 0) ">
				<view style="margin-top: 5px;">
					<span style="color: red;">*</span>不能超过5M（最多上传16张）
					<u-upload ref="uUpload" :action="actions" :header="headers" @on-success="onsuccess"
						:max-size="5 * 1024 * 1024" @on-error="onerror" @on-remove="onRemove" max-count="16"
						:auto-upload="false" name="file" @on-change="onListOnchange" width="139" height="139">
					</u-upload>
				</view>
			</view>


			<view class="vis" style="margin-bottom: 10px;margin-bottom: constant(safe-area-inset-bottom);  
		margin-bottom: env(safe-area-inset-bottom);  " v-if="imgList.length > 0 && Nothree == 0 && ids!=6">
				<view v-for="(item,index) in imgList" :key="index">
					<view class="imgClass">
						<u-image width="100%" height="100%" :src="baseUrl +item.attachUrl"
							@click="imgListPreview(baseUrl +item.attachUrl)"></u-image>
					</view>
				</view>
			</view>
			<!-- 补充的时候 -->
			<view class="vis" style="margin-bottom: 10px;margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);" v-if="ids == 6">
				<view v-for="(item,index) in fileList" :key="index">
					<view class="imgClass">
						<u-image width="100%" height="100%" :src="item.url" @click="imgListPreview(item.url)"></u-image>
					</view>
				</view>

				<view v-if=" fileList.length < 16" style="float:left">
					<span style="color: red;">*</span>不能超过5M（最多上传16张 已上传{{fileList.length}}张）
					<u-upload ref="uUpload" :action="actions" :header="headers" @on-success="onsuccess"
						:max-size="5 * 1024 * 1024" @on-error="onerror" @on-remove="onRemove" :max-count="maxCount"
						:auto-upload="false" name="file" @on-change="onListOnchange" width="139" height="139">
					</u-upload>
				</view>
			</view>


			<!-- 内容结束 -->
			<view class="footer safe-area-inset-bottom">
				<button v-if="ids==1 && isbutton==0" style="background-color: #4a9add ;width: 50%;color: #fff;"
					@click="submitBL">完成备料</button>
				<button v-if="ids==2 && isbutton==0" style="background-color: #4a9add ;width: 50%;color: #fff;"
					@click="submit">完成配送</button>
				<button v-if="ids==3 && isbutton==0" style="background-color: #4a9add ;width: 50%;color: #fff;"
					@click="submit">完成核料</button>

				<button v-if="ids==4 && isbutton==0 " style="background-color: #4a9add ;width: 50%;color: #fff;"
					@click="submit">完成取件</button>
				<button v-if="ids==5 && isbutton==0"
					style="background-color: #ccc ;width: 50%;color: #fff;">已完成</button>
				<button v-if="ids==6 && isbutton==0 && fileList.length < 16" @click="submit"
					style="background-color: #4a9add ;width: 50%;color: #fff;">完成补充</button>

				<button v-if="isbutton == 1" style="background-color: #ccc ;width: 50%;color: #fff;">已完成核料</button>
				<button v-if="isbutton == 2" style="background-color: #ccc ;width: 50%;color: #fff;">已完成取件</button>
				<button v-if="ids==6 && fileList.length >= 16"
					style="background-color: #ccc ;width: 50%;color: #fff;">已完成补充</button>
			</view>
		</view>

		<u-modal v-model="show" width="70%" :show-title="false" @confirm="confirm" ref="uModal">
			<view style="padding:10rpx 20rpx;">

				<u-checkbox-group :wrap="true" size="50" @change="checkboxGroupChange">
					<u-checkbox active-color="#4a9add" v-model="item.checked" v-for="(item, index) in listCheck"
						:key="index" :name="item.dictSort">{{item.dictLabel}}
					</u-checkbox>
				</u-checkbox-group>
			</view>

		</u-modal>
	</view>
</template>
<script>
	import {
		Upload,
		Dist_Data_Type,
		OrderCheck,
		OrderBack,
		OrderReceive,
		OrderSend,
		OneWoOrder,
		OrderPlan,
		attach_list,
		attach_batch
	} from "@/pages/api/api"
	import {
		baseUrl
	} from "@/pages/api/url"
	export default {
		data() {
			return {
				text: "返回",
				contnetVar: "退回",
				fileList: [],
				ids: 1,
				baseUrl: baseUrl,
				actions: baseUrl + '/common/upload',
				list: {},
				list2: {},
				listCheck: [],
				urgentDegree: "",
				yunshuleixing: "",
				yewuleixing: "",
				headers: {
					"Authorization": 'Bearer ' + uni.getStorageSync('token'),
					'Content-Type': 'multipart/form-data'
				},
				num: 0,
				fileName: [],
				FileUrl: [],
				icon1: 0,
				icon2: 0,
				icon3: 0,
				icon4: 0,
				show: false,
				arrName: [],
				arrNum: [],
				imgList: [],
				isbutton: 0,
				arrSum: 0,
				Nothree: 0,
				maxCount: 16
			}
		},
		onLoad(option) {


			this.ids = option.id
			this.list = JSON.parse(option.onjs)
			// console.log(this.list)
			this.pubilcs("", data => {
				// console.log(999, data)
				this.list2 = data;
				console.log(999, data)
				if (option.id == 1) {
					this.icon1 = 1
				} else if (option.id == 2) {
					this.icon1 = 1
					this.icon2 = 1
					this.icon3 = 1
					this.icon4 = 1

				} else if (option.id == 3) {
					this.icon1 = 1
					this.icon2 = 1
					this.reqs(30)

				} else if (option.id == 4) {
					this.icon1 = 1
					this.icon2 = 1
					this.icon3 = 1
					this.reqs(40)

				} else if (option.id == 5) {
					this.icon1 = 1
					this.icon2 = 1
					this.icon3 = 1
					this.icon4 = 1
					this.reqs(50)
				} else if (option.id == 6) {
					console.log(1231);
					this.buchong()
				}
			})



			Dist_Data_Type("wo_urgent_degree").then(res => {
				res.data.map(v => {
					if (v.dictValue == this.list.urgentDegree) {
						this.urgentDegree = v.dictLabel
					}
				})
				// console.log("紧急程度", res)
			})
			Dist_Data_Type("wo_transport_type").then(res => {
				res.data.map(v => {
					if (v.dictValue == this.list.transportType) {
						this.yunshuleixing = v.dictLabel
					}
				})
				// console.log("运输类型", res)
			})
			Dist_Data_Type("wo_business_type").then(res => {
				res.data.map(v => {
					if (v.dictValue == this.list.businessType) {
						this.yewuleixing = v.dictLabel
					}
				})
				// console.log("业务类型", res)
			})



		},
		methods: {
			async reqs(orderState) {
				await attach_list(`?orderId=${this.list2.orderId}&orderState=${orderState}`).then(res => {

					if (res.code == 200) {
						this.imgList = res.data
					}

				})
			},
			async pubilcs(e, callback) {
				await OneWoOrder(`${this.list.orderId}`).then(res => {
					if (res.code == 200) callback(res.data)
				})
			},
			async submit() {
				if (this.ids == 3) {
					this.list2.woOrderDetailList.map((v, index) => {
						let files = this.$refs.uUpload[index].lists;
						if (files.length == 0) {
							this.$refs.uToast.show({
								title: '请上传图片',
								type: 'error',
							})
						} else {
							this.$refs.uUpload[index].upload()
						}

					})
				} else {
					let files = this.$refs.uUpload.lists;
					if (files.length == 0) {
						this.$refs.uToast.show({
							title: '请上传图片',
							type: 'error',
						})
					} else {
						if (this.ids == 2) {
							this.pubilcs("", data => {

								if (data.delayFlag == 1) {
									// console.log("超时0", data.delayFlag)
									Dist_Data_Type("wo_delay_reason").then(res => {
										this.listCheck = res.data.map(v => {
											return {
												dictLabel: v.dictLabel,
												dictSort: v.dictSort,
												checked: false
											}
										})
										this.show = true;
									})

								} else {
									this.$refs.uUpload.upload();
								}

							})

						} else {
							this.$refs.uUpload.upload();
						}

					}
				}

			},

			checkboxGroupChange(e) {
				let arr = []
				e.forEach((item) => {
					this.listCheck.forEach((element) => {
						if (item == element.dictSort) {
							arr.push(element.dictLabel)
						}
					})
				})
				this.arrName = arr;
				this.arrNum = e;

			},
			confirm() {
				if (this.arrName.length == 0) {
					this.$refs.uToast.show({
						title: '最少选择一项',
						type: 'error',
					})
					this.show = true;

				} else {
					this.$refs.uUpload.upload();

				}
				// console.log(this.arrName, this.arrNum)
			},
			submitBL() {
				OrderPlan({
					orderId: this.list.orderId,
					version: this.list.version,
				}).then(v => {
					console.log("备料", v)
					if (v.code == 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},


			onuploaded(lists, detailId) {
				this.arrSum = this.arrSum + 1;

				if (this.arrSum == this.list2.woOrderDetailList.length) {
					// console.log("所有成功", this.FileUrl)

					OrderCheck({
						orderId: this.list.orderId,
						version: this.list.version,
						woOrderAttachList: this.FileUrl,
					}).then(v => {
						console.log("核料", v)
						if (v.code == 200) {
							uni.showToast({
								title: '核料成功',
								duration: 2000
							});
							this.show = false;
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							this.list2.woOrderDetailList.map((v, index) => {
								this.$refs.uUpload[index].clear()
							})
							this.fileName = [];
							this.FileUrl = [];
						}
					})

				}




			},
			async onsuccess(e, index, lists, name) {
				console.log("成功", e, index, lists, name)
				if (this.ids != 6) {


					if (this.ids == 3) {
						this.FileUrl.push({
							attachUrl: e.fileName,
							subOrderId: name
						});

					} else {
						this.FileUrl.push({
							attachUrl: e.fileName
						});

						console.log("触发上传")
						if (this.FileUrl.length == this.$refs.uUpload.lists.length) {


							let attr = this.FileUrl.map((item, index) => {
								return {
									...item,
									...this.fileName[index]
								}
							})

							if (this.ids == 2) {

								OrderSend({
									orderId: this.list.orderId,
									version: this.list.version,
									delayReason: this.arrNum.toString(),
									delayReasonText: this.arrName.toString(),
									woOrderAttachList: attr
								}).then(v => {
									console.log("配送", v)
									this.show = false;
									if (v.code == 200) {
										uni.showToast({
											title: '配送成功',
											duration: 2000
										});
										setTimeout(() => {
											uni.navigateBack()
										}, 1000)
									} else {
										this.$refs.uUpload.clear()
										this.fileName = [];
										this.FileUrl = [];
									}
								})
							} else if (this.ids == 3) {

								console.log(666, this.list2.woOrderDetailList)

							} else if (this.ids == 4) {
								OrderReceive({
									orderId: this.list.orderId,
									version: this.list.version,
									woOrderAttachList: attr
								}).then(v => {
									console.log("取件", v)
									if (v.code == 200) {
										uni.showToast({
											title: '取件成功',
											duration: 2000
										});
										setTimeout(() => {
											uni.navigateBack()
										}, 1000)
									} else {
										this.$refs.uUpload.clear()
										this.fileName = [];
										this.FileUrl = [];
									}
								})
							}

						}
					}
				} else {
					//补充
					this.FileUrl.push({
						attachUrl: e.fileName,
						subOrderId: name,
						attachName: index,
						orderId: this.list2.orderId,
						orderState: 50
					});

		

					if (this.FileUrl.length == this.$refs.uUpload.lists.length) {

						attach_batch(this.FileUrl).then(res => {

							if (res.code == 200) {
								uni.showToast({
									title: '补充成功',
									duration: 2000
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1500)

							}

						})

					}

				}
			},
			onerror(e) {
				uni.showToast({
					title: '文件上传失败' + JSON.stringify(e),
					icon: "none",
					duration: 20000
				});
			},
			onListOnchange(res, index, lists) {

				let fileName = lists.map(v => {
					return {
						attahcName: v.url.slice(11)
					}
				})
				this.fileName = fileName
				// console.log(111,fileName)
			},
			onRemove(index, lists) {
				if (this.ids != 6) {
					this.FileUrl.splice(index, 1);
					this.fileName.splice(index, 1);
				} else {
					this.buchong()
					console.log(1111111111, index, lists);
				}


			},

			tuihui() {
				if (this.ids != 6) {
					OrderBack({
						orderId: this.list.orderId,
						version: this.list.version,
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '退回成功',
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
						console.log("退回", res)
					})
				}

			},
			async heliao1(orderState) {
				console.log(12132, this.ids)
				if (this.ids != 1) {
					if (this.ids != 6) {

						if (this.ids != 2) {
							if (this.ids == 3) {
								this.isbutton = 0
							} else {
								this.isbutton = 1
							}
							this.Nothree = 1
							await attach_list(`?orderId=${this.list2.orderId}&orderState=${orderState}`)
								.then(
									res => {

										if (res.code == 200) {
											this.imgList = res.data
										}

									})
						} else {
							this.isbutton = 1;
							this.Nothree = 1;
							await attach_list(`?orderId=${this.list2.orderId}&orderState=${orderState}`)
								.then(
									res => {

										if (res.code == 200) {
											console.log(res, orderState)
											this.imgList = res.data
										}

									})
						}

					}
				}
			},
			async heliao2(orderState) {
				if (this.ids != 1) {

					// if (this.ids != 2) {
					if (this.ids == 4 || this.ids == 5) {


						if (this.ids == 4) {
							this.isbutton = 0
						} else {
							this.isbutton = 2
						}
						this.Nothree = 0


						await attach_list(`?orderId=${this.list2.orderId}&orderState=${orderState}`)
							.then(
								res => {
									if (res.code == 200) {
										this.imgList = res.data
									}

								})
					}
					// }
					if (this.ids == 2) {

						if (this.ids == 4) {
							this.isbutton = 0
						} else {
							this.isbutton = 2
						}
						this.Nothree = 0


						await attach_list(`?orderId=${this.list2.orderId}&orderState=${orderState}`)
							.then(
								res => {
									if (res.code == 200) {
										this.imgList = res.data
									}

								})
					}

				}
			},
			async heliao3(orderState) {
				if (this.ids != 1) {
					if (this.ids != 6) {

						if (this.ids == 5) {
							this.Nothree = 0
							this.isbutton = 0;
							await attach_list(
									`?orderId=${this.list2.orderId}&orderState=${orderState}`)
								.then(res => {
									if (res.code == 200) {
										this.imgList = res.data
									}

								})
						} else {
							console.log("配送")
							this.isbutton = 0;
							this.pubilcs("", data => {
								console.log(999, data)
								this.list2 = data;
								this.imgList = []

							})




						}
					}
				}
			},
			async buchong(orderState = 50) {
				await attach_list(`?orderId=${this.list2.orderId}&orderState=${orderState}`)
					.then(res => {
						console.log("补充", res);
						if (res.code == 200) {

							this.fileList = res.data.map((v, index) => {
								return {
									url: baseUrl + v.attachUrl,
									index
								}
							})
							this.maxCount = this.maxCount - this.fileList.length;

							// this.FileUrl = res.data.map((v, index) => {
							// 	return {
							// 		attachUrl: v.attachUrl,
							// 		subOrderId: v.subOrderId,
							// 		attachName: index,
							// 		orderId: this.list2.orderId,
							// 		orderState: 50
							// 	}
							// })
							console.log(123123, this.FileUrl);
						}

					})
			},
			imgListPreview(url) {
				var urlList = []
				urlList.push(url) //push中的参数为 :src="item.img_url" 中的图片地址
				uni.previewImage({
					indicator: "none",
					loop: false,
					urls: urlList
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	.header {
		width: 90%;
		margin: 10px auto 0;
		background: #fff;
		border-radius: 5px;
		position: relative;
		left: 0;
		right: 0;


		.one {
			border-bottom: 1px solid #f9f2f2;
			padding: 17px 0;
			width: 94%;
			margin: 0 auto;
			left: 0;
			right: 0;

			.title {
				// left: 32rpx;
				// position: relative;
				// width: calc(100% - 50rpx);
				width: calc(100% - 50rpx);
				margin-left: 24px;
			}
		}
	}

	.grid-text {
		margin-top: 40rpx;
		color: #000;
	}

	.content {
		overflow-y: scroll;
		// margin: 10px auto 120rpx;
		// position: absolute;
		height: calc(100vh - 20vh);

	}

	.vis {
		background: #fff;
		border-radius: 5px;
		padding: 10px;
		left: 0;
		right: 0;
		width: 90%;
		margin: 0 auto;
		color: #a2a2a2;
		display: table;
	}


	.hole:after {
		position: absolute;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 90rpx;
		content: attr(data-content);
		border-radius: 50%;
		border: 10px solid #f06868;
		color: #f06868;
		font-weight: bold;
		font-size: 40rpx;
		overflow: hidden;
	}

	.hole6:after {
		position: absolute;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 90rpx;
		content: attr(data-content);
		border-radius: 50%;
		border: 10px solid #ccc;
		color: #ccc;
		font-weight: bold;
		font-size: 40rpx;
		overflow: hidden;
	}

	.footer {
		width: 100%;
		min-height: 120rpx;
		position: fixed;
		bottom: 0;
		background: #fff;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.nobreaks {
		word-break: break-all;
		white-space: normal;
	}

	.imgClass {
		float: left;
		width: 22%;
		margin: 1.5% 1.5%;
		height: 140rpx;
	}

	.heliaoClass:last-child {}
</style>
